<%--
/**
 * Licensed to Open-Ones Group under one or more contributor license
 * agreements. See the NOTICE file distributed with this work
 * for additional information regarding copyright ownership.
 * Open-Ones Group licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a
 * copy of the License at:
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Product - Search</title>
<script type="text/javascript">
  function submitSearch(frmName, cmd, alphabetRange) {
      var frm = document.forms[frmName];
      frm.cmd.value = cmd;
      frm.alphabetRange.value = alphabetRange;
      frm.submit();
  }
</script>
<script language="javascript">
    function changeImage_hover(id){
        var temp = id.substring(0, id.indexOf("_") + 1);
        var index = id.substring(id.indexOf("_") + 1,  id.length);
        var indexInt = eval(index);
        
        for (i = 1; i <= indexInt; i++){
            var mImg = document.getElementById(temp + i);
            mImg.src = "images/star_hover.png";
        }
    }
    
    function changeImage_normal(id, stt){
        var tempId = id.substring(0, id.indexOf("_") + 1);
        var tempStt = stt.substring(0, stt.indexOf("_") + 1);
        var index = id.substring(id.indexOf("_") + 1,  id.length);
        var indexInt = eval(index);
    
        for (i = 1; i <= indexInt; i++){
            var status = document.getElementById(tempStt + i);
            var mImg = document.getElementById(tempId + i);
            if (status.value == "")
                mImg.src = "images/star.png";
            else {
                mImg.src = "images/star_hover.png";
            }
        }
    }
    
    function changeImage_click(id, stt){
        var tempId = id.substring(0, id.indexOf("_") + 1);
        var tempStt = stt.substring(0, stt.indexOf("_") + 1);
        var index = id.substring(id.indexOf("_") + 1,  id.length);
        var indexInt = eval(index);
        
        var countTotalStar = 0;
        for (i = 1; i <= 5; i++){
            var status = document.getElementById(tempStt + i);
            if (status.value != "")
                countTotalStar++;
        }
        
        if (eval(countTotalStar) == indexInt){
            resetStar(id, stt);
        }
        
        else {
            for (i = 1; i <= indexInt; i++){
                var status = document.getElementById(tempStt + i);
                var mImg = document.getElementById(tempId + i);
                
                status.value = "clicked";
                mImg.src = "images/star_hover.png";
            }
            
            
            for (i = indexInt + 1; i <= 5; i++){
                var status = document.getElementById(tempStt + i);
                var mImg = document.getElementById(tempId + i);
                
                status.value = "";
                mImg.src = "images/star.png";
            }
        }
    }
    
    function resetStar(id, stt){
        var tempId = id.substring(0, id.indexOf("_") + 1);
        var tempStt = stt.substring(0, stt.indexOf("_") + 1);
        
        for (i = 1; i <= 5; i++){
            var status = document.getElementById(tempStt + i);
            var mImg = document.getElementById(tempId + i);
            
            status.value = "";
            mImg.src = "images/star.png";
        }
    }
</script>

</head>
<body>
<jsp:include page="header.jsp"/>
<form name="frmSearch" action="Search.do" method="post">
  <input type="hidden" name="cmd" value="search"/>
  <input type="hidden" name="alphabetRange" value=""/>
  

<table>
    <tr><td>
        
        <table border="0" width="580px" id="table2" cellspacing="0" cellpadding="0" height="22">
            <tr>
                <td align="right">
                    <c:if test='${user.isAdmin}'>
                    <a href="#" onclick='submitSearch("frmSearch", "addProduct","AE");'>Add Product</a>
                    </c:if>
                </td>
            </tr>
        </table>
        
        <table id="myTable">
            <tr>
                <td align="left" id="long">Find products:</td>
                <td align="left">
                    <input name="text" value="OGate" style="width:400px" type="text"/>
                </td>
                <td align="left">
                    <input type="submit" name="btnSearch" value="Search"/>
                </td>
            </tr>
        </table>
        <table id="myTable">
            <tr>
                <td id="long" align="left">
                    <p align="left">by Alphabet:</p>
                </td>
                <td width="80">
                    <p align="left"><a href="#" onclick='submitSearch("frmSearch", "search","AE");'>A - E</a></p>
                </td>
                    <td width="80">
                    <p align="left"><a href="#" onclick='submitSearch("frmSearch", "search","FJ");'>F - J</a></p>
                </td>
                    <td width="80">
                    <p align="left"><a href="#" onclick='submitSearch("frmSearch", "search","HL");'>H - L</a></p>
                </td>
                    <td width="80">
                    <p align="left"><a href="#" onclick='submitSearch("frmSearch", "search","MP");'>M - P</a></p>
                 </td>
                    <td width="80">
                    <p align="left"><a href="#" onclick='submitSearch("frmSearch", "search","QZ");'>Q - Z</a></p>
                 </td>
            </tr>
        </table>
     </td></tr>
     <br/>
    <tr><td>
        <table width="580px">
            <tr>
                <td align="left" colspan="6">
                    <h3> Found projects: </h3>
                </td>
            </tr>
            <c:forEach var="product" items="${products}">
            <tr>
                <td>
                    <table id="myTable">
                        <tr>
                            <th align="left" colspan="6"/><b>${product.name}</b></td>
                            <a href="${product.linkDownload}">Download</a></tr>
                        <tr>
                            <td id="short"></td>
                            <td colspan="6">${product.desc}</td>
                        </tr>
                        <tr>
                            <td id="short"></td>
                            <td id="short">Status:</td>
                            <td id="medium" width="94" >Finish.</td>
                            <td id="short">Mark:</td>
                            <td id="long" align="left">
                                <img  id="star1_1" src="images/star.png" onmouseover="changeImage_hover(this.id)" onmouseout="changeImage_normal(this.id, 'status1_1')" onclick="changeImage_click(this.id, 'status1_1')"/><input type="hidden" id="status1_1" value=""/>
                                <img  id="star1_2" src="images/star.png" onmouseover="changeImage_hover(this.id)" onmouseout="changeImage_normal(this.id, 'status1_2')" onclick="changeImage_click(this.id, 'status1_2')"/><input type="hidden" id="status1_2" value=""/>
                                <img  id="star1_3" src="images/star.png" onmouseover="changeImage_hover(this.id)" onmouseout="changeImage_normal(this.id, 'status1_3')" onclick="changeImage_click(this.id, 'status1_3')"/><input type="hidden" id="status1_3" value=""/>
                                <img  id="star1_4" src="images/star.png" onmouseover="changeImage_hover(this.id)" onmouseout="changeImage_normal(this.id, 'status1_4')" onclick="changeImage_click(this.id, 'status1_4')"/><input type="hidden" id="status1_4" value=""/>
                                <img  id="star1_5" src="images/star.png" onmouseover="changeImage_hover(this.id)" onmouseout="changeImage_normal(this.id, 'status1_5')" onclick="changeImage_click(this.id, 'status1_5')"/><input type="hidden" id="status1_5" value=""/>
                            </td>
                            <td id="medium">Download:</td>
                            <td id="short">18</td>
                        </tr>
                        <tr>
                            <td id="short"></td>
                            <td align="left" colspan="6">
                                <a class="myLink" href="#">View detail</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            </c:forEach>
        </table>
    </td></tr>
</table>
        
                    </form>
</body>
</html>